[자바스크립트] 엘리먼트의 페이지 위치 알아내기, getBoundingClientRect

자바스크립트를 사용하여 화면(screen)으로부터 DOM 엘리먼트의 위치(position)를 알 수 있는 방법에 대하여 알아봅니다.

# DOM 엘리먼트의 위치 구하기

이 번에 알아볼 방법은 현재 화면, 윈도우(window)룰 기준으로 특정 엘리먼트의 위치 값을 구하는 방법을 알아봅니다. 아래 스크린샷 처럼 말이죠. 상단과 하단은 스크롤을 이동하여 화면에서 보이지 않는 영역입니다.

스크린샷) 화면을 기준으로 부터의 거리 구하기

즉 현재 브라우저 화면을 기준으로 위치 값을 가져옵니다. 만약 값을 구할 엘리먼트가 감춰져 안 보인다면? 이 경우 화면 밖에 위치하므로 당연히 마이너스 값이 나타나게 될 것입니다. 이런 이유로 문서 전체인 Document 기준이라면 항상 0보다 큰 값을 가지겠지만 이 방법은 마이너스 값이 나올 수 있는 것입니다..

! DOM 함수 getBoundingClientRect() 사용하여 위치 구하기

먼저 이 전에는 어떻게 값을 구할 수 있었을까요? 일단 브라우저 호환성 문제로 엘리먼트의 정확한 위치 값을 얻기가 매우 어려웠습니다. 때로는 부모 요소의 부모 요소를 계속 값을 계속 더하는 반복적인 작업도 필요했죠. 이런 이유로 jQuery 등의 라이브러리를 반드시 사용해야 했죠.

하지만 DOM 메소드 getBoundingClientRect()를 사용하면 매우 간단하게 원하는 요소의 위치 값을 얻을 수 있습니다. 아래는 간단한 문법입니다.

DOM.getBoundingClientRect()

이 방법은 대부분의 브라우저를 지원하면서 가장 쉽고 빠르게 위치 값을 가져올 수 있다는 점입니다.

그럼 간단한 예제를 만들어 봅니다. 아래에는 ID값 test를 가지는 이미지가 있습니다.

이 이미지가 화면으로 어디에 위치해 있는지 알기 위해서 getBoundingClientRect()를 적용해보도록 하겠습니다.

이제 위치 값을 구하기 위해 아래처럼 콘솔창에 출력해보도록 하겠습니다.

출력된 결과를 보면 top, bottom, left, right, width, height, x, y의 값이 출력됩니다.

top or y // 화면 상단 부터 대상의 처음 위치 값
bottom // 화면 상단 부터 대상의 끝 위치 값
left or x // 화면 좌측 부터 대상의 처음 위치 값
right // 화면 좌측 부터 대상의 끝 위치 값
width // 대상의 길이
height // 대상의 높이

이와 같이 간단하게 대상 엘리먼트의 위치 정보를 얻을 수 있습니다.


스크린샷) 대상의 width, height 값과 right, bottom 값도 출력함

! 브라우저 호환성 정보

IE 에서 x, y 값을 얻지 못하는 부분을 제외하면 대부분의 브라우저에서 모두 지원합니다.

여기까지 화면을 기준으로 위치 값을 가져올 수 있는 DOM 메소드 getBoundingClientRect()에 대하여 알아보았습니다.